<!--
 * @Author: Cenven
 * @Date: 2021-03-17 10:58:02
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-09-16 15:08:49
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <!-- 填空题 -->
  <div class="cloze-questions">
    <div class="answer-type">
      填空题<span v-if="['2', '3'].includes(type)"
        >（{{ detail.score }}分）</span
      >
    </div>
    <div class="answer-question">
      <template v-if="detail.richTextSwitch == 1">
        <p class="question-title" v-html="detail.question.question"></p>
      </template>
      <template v-else>
        <p class="question-title">
          {{ detail.question.question }}
        </p>
      </template>
    </div>
    <div class="answer-box">
        
      <div v-if="detail.richTextSwitch == 1">
        <div class="answer" v-for="(item, index) in user_answer" :key="index">
            <div class="answer-label">第{{ index + 1 }}空处：</div>
            <RichText
            :content="user_answer[index]"
            v-if="!detail.is_ban_input"
            @handleChange="v => handleChange(v, index)"
            ></RichText>
            <div v-html="item" v-if="detail.is_ban_input"></div>
        </div>
        
      </div>
      <div v-else>
          <div class="answer" v-for="(item, index) in user_answer">
            <div class="answer-label">第{{ index + 1 }}空处：</div>
                <Input
                v-model="user_answer[index]"
                @on-change="e => handleChange(e.target.value, index)"
                type="textarea"
                :rows="12"
                :placeholder="$t('locale.pc.mytest.testReview.t4')"
                :disabled="detail.is_ban_input"
            />
        </div>
        </div>
    </div>
    <div class="analysis" v-if="!['1', '2', '3'].includes(type)">
      <span @click="handleShowExplain">查看解析</span>
    </div>
  </div>
</template>

<script>
import RichText from "~/components/pc/RichText.vue";
export default {
  props: ["value", "detail", "type"],
  components: {
      RichText
  },
  data() {
    return {
      user_answer: []
    };
  },
  watch: {
    value: {
      handler(new_val, old_val) {
          console.log(new_val);
        if (this.user_answer != new_val) {
          this.user_answer = new_val;
        }
      },
      deep: true
    }
  },
  computed: {
    /* 类型（0章节练习 试卷类型 1专项训练 2模拟考试 3真题训练） */
  },
  methods: {
    handleChange(v, x) {
      this.user_answer = this.user_answer.map((item, index) => {
        if (x == index) {
          return v;
        } else {
          return item;
        }
      });
      this.$emit("input", this.user_answer);
      this.$emit("change", this.user_answer);
    },
    handleShowExplain() {
      this.$emit("handleExplain", this.detail.id);
    }
  },
  created() {
    if( typeof this.value == 'string'){
      this.user_answer = JSON.parse(this.value);
    }else{
      this.user_answer = this.value;
    }
  },
  activated() {},
  mounted() {}
};
</script>

<style lang="scss">
// 填空题/判断题样式
.cloze-questions {
  background: #fff;
  width: 100%;
  .answer-type {
    font-size: 16px;
    line-height: 24px;
    padding: 20px 0;
  }
  .answer-question {
    .question-title {
      font-size: 16px;
      line-height: 24px;
    }
  }
  .answer-box {
    margin: 12px 0;
    .answer{
        // display: flex;
        .answer-label{
            // width: 100px;
            font-size: 16px;
            margin-bottom: 10px;
        }
    }
    .rich_text_box {
      position: relative;
      left: 26px;
      top: -17px;
    }
    .ivu-radio-wrapper,
    .ivu-checkbox-wrapper {
      font-size: 14px;
      display: block;
    }
    .ivu-input {
      font-size: 14px;
    }
    .ivu-radio-wrapper + .ivu-radio-wrapper {
      margin-top: 12px;
    }
    .ivu-input-wrapper + .ivu-input-wrapper {
      margin-top: 12px;
    }
    .ivu-checkbox-wrapper + .ivu-checkbox-wrapper {
      margin-top: 12px;
    }
  }
  .analysis {
    text-align: right;
    color: var(--theme-color);
    cursor: pointer;
    font-size: 16px;
    padding: 30px 20px;
    box-sizing: border-box;
  }
}
</style>
